/**
 * Created by DELL on 2017/6/22.
 */
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @xyj  分享面板
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
    Modal,
    TouchableWithoutFeedback,
    Image,
} from 'react-native';
import BaseComponent,{base} from '../../base/Base'

import * as Wechat from 'react-native-wechat';

/**
 * Share something to timeline/moments/朋友圈
 * @method shareToTimeline
 * @param {Object} data
 * @param {String} data.thumbImage - Thumb image of the message, which can be a uri or a resource id.
 * @param {String} data.type - Type of this message. Could be {news|text|imageUrl|imageFile|imageResource|video|audio|file}
 * @param {String} data.webpageUrl - Required if type equals news. The webpage link to share.
 * @param {String} data.imageUrl - Provide a remote image if type equals image.
 * @param {String} data.videoUrl - Provide a remote video if type equals video.
 * @param {String} data.musicUrl - Provide a remote music if type equals audio.
 * @param {String} data.filePath - Provide a local file if type equals file.
 * @param {String} data.fileExtension - Provide the file type if type equals file.
 */
export default class  ShareBoardPage extends BaseComponent {


    constructor(props){
        super(props);
        //数据传参形式
        // ShareData={{shareTitle:data.name,shareIcon:data.iconUrl,shareDesc:data.des,shareLink:"http://www.baidu.com",shareType:'imageUrl'}}
       let data= this.props.ShareData;

       this.state={
           shareData:data,
       }
    }

    _toShare(index){
      let data=  this.state.shareData;
        if(!data){
            base.toastShort('暂无分享数据');
            return;
        }
        switch (index){
            case 0:
            case 1:
            case 2:
            case 3:
                Wechat.isWXAppInstalled()
                    .then(succ=>{

                        Wechat.shareToTimeline({
                           type:'news',
                            thumbImage:data.shareIcon,
                            webpageUrl:data.shareLink,
                            title:data.shareDesc,
                            description:data.shareDesc,
                        })
                            .then((succ)=>{
                                alert('分享成功')
                            })
                            .catch((error)=>{
                               alert('分享失败：'+error)
                            })
                            .done();
                    })
                    .catch(error=>{
                        alert('请先安装微信')
                    })
                    .done()

                break
            // case 1:
            //     break
            // case 2:
            //     break
            // case 3:
            //     break
            default:
                break

        }
    }

    _setVisible(visible){
        this.props.modalPreThis(visible);
    }

  render() {
   let visable= this.props.modalVisible;
    return (
        <Modal
            animationType={"fade"}
            transparent={true}
            visible={visable}
            onRequestClose={() => {this.props.onRequestClose
            }}
        >
            <View  style={{flex:1,backgroundColor:'rgba(0,0,0,0.3)',}}>
                <View style={{flex:1}}/>
                <View style={{backgroundColor:'#fff',justifyContent:'flex-start',alignItems:'center'}}>
                    <Text style={{marginTop:10,marginBottom:10}}>分享到</Text>
                    <View style={{backgroundColor:'#dedede',flexDirection:'row',height:1,width:'90%'}}/>
                    <View style={{marginBottom:10,marginTop:10,flexDirection:'row',justifyContent:'center',alignItems:'center',width:'90%'}}>

                        <ShareItem
                            onPress={() => {
                                this._toShare(0)
                                this._setVisible(false)
                            }}
                            textName='微信'
                            image_url={require('../../imgs/share/share_wechart.png')}
                        />
                        <ShareItem
                            onPress={() => {
                                this._toShare(1)
                                this._setVisible(false)
                            }}
                            textName='QQ'
                            image_url={require('../../imgs/share/share_qq.png')}
                        />
                        <ShareItem
                            onPress={() => {
                                this._toShare(2)
                                this._setVisible(false)
                            }}
                            textName='朋友圈'
                            image_url={require('../../imgs/share/share_pengyoupuquan.png')}
                        />
                        <ShareItem
                            onPress={() => {
                                this._toShare(3)
                                this._setVisible(false)
                            }}
                            textName='新浪'
                            image_url={require('../../imgs/share/share_xinlang.png')}
                        />

                    </View>
                    <View style={{backgroundColor:'#dedede',flexDirection:'row',height:1,width:'90%'}}/>
                    <Text  style={{marginTop:10,marginBottom:10}} onPress={()=>{this._setVisible(false)}}>取消</Text>
                </View>
            </View>

        </Modal>
    );
  }
}


//导航图片和文字 自定义组件
class ShareItem extends BaseComponent {

    render() {
        return (
            <TouchableWithoutFeedback
                onPress={this.props.onPress}
            >

                <View
                    style={{flex: 1, justifyContent: 'center', alignItems: 'center', paddingTop: 8, paddingBottom: 8,}}
                >

                    <Image source={ this.props.image_url}

                           style={ {width: 54, height: 54, marginBottom: 7} }
                    />
                    <Text

                        style={{fontSize: 12, color: '#212121'}}>{this.props.textName}</Text>

                </View>

            </TouchableWithoutFeedback>



        )
    }
}
